<template>
<div class="custom-tree-container">

  <div class="block">
    <p>网上购物三级分类</p>
    <el-tree
    :props="{ value: 'id',label:'name' }"
      :data="data"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => openDialog(data)">
            Append
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            Delete
          </el-button>
        </span>
      </span>
    </el-tree>
  </div>
  <div>
      <el-dialog
        title="输入分类信息"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form :model="formData" label-width="80px">
          <el-form-item label="分类名称" prop="categoryName">
            <el-input v-model="formData.categoryName"></el-input>
          </el-form-item>
            <el-form-item label="上传头像" prop="formData.header">
                <image-upload v-model="formData.header"/>
            </el-form-item>

          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveCategory">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</div>



</template>

<script>
import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/qiantai/category";

export default {
  name: "Category",
  data() {
    return {
    addData: {},
    dialogVisible: false,
          formData: {
            categoryName: '',
            header: ''
            // 其他表单数据
          },
        data: [
            ]

    };
  },
  created() {
    this.getList();
  },
  methods: {
  openDialog(data) {
  console.log(data)
  if(data.catLevel===2){
  this.$message({
                type: 'info',
                message: `第三级分类不能添加子分类`
              });
  return;
  }
  this.addData=data,
        this.dialogVisible = true;
      },
      saveCategory() {
      const qin = {
          'parentId':this.addData.id,
          'name': this.formData.categoryName,
          'catLevel': this.addData.catLevel+1,
          'icon':this.formData.header
      };
      console.log(this.formData.header)
      addCategory(qin).then(response => {
                    this.$modal.msgSuccess("新增成功");
                    this.open = false;
                    this.getList();
                  });
        // 在这里处理保存分类的逻辑
        console.log('保存分类信息：', this.formData);
        this.dialogVisible = false;
      },
  append(data) {
          const newChild = { id: id++, label: 'testtest', children: [] };
          if (!data.children) {
            this.$set(data, 'children', []);
          }
          data.children.push(newChild);
        },

        remove(node, data) {
        if(data.children==null){

        console.log(data.id);
                  delCategory(data.id).then(response => {
                                      this.$modal.msgSuccess("删除成功");

                                      this.getList();
                                    });
                                    return;
        }

        if(data.children.length==0){
 console.log(data.id);
                  delCategory(data.id).then(response => {
                                      this.$modal.msgSuccess("删除成功");

                                      this.getList();
                                    });
                                    return;

        }
          this.$message({
                          type: 'info',
                          message: `存在子分类不能删除`
                        });

        },

        renderContent(h, { node, data, store }) {
          return (
            <span class="custom-tree-node">
              <span>{node.label}</span>
              <span>
                <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
                <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
              </span>
            </span>);
        },
    /** 查询商品三级分类列表 */
    getList() {
      this.loading = true;
      listCategory(this.queryParams).then(response => {
        this.data = response.data;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        parentId: null,
        name: null,
        catLevel: null,
        showStatus: null,
        sort: null,
        icon: null,
        productUnit: null,
        productCount: null,
        remark: null,
        createTime: null,
        updateTime: null,
        isDelete: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加商品三级分类";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getCategory(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改商品三级分类";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateCategory(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addCategory(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除商品三级分类编号为"' + ids + '"的数据项？').then(function() {
        return delCategory(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('qiantai/category/export', {
        ...this.queryParams
      }, `category_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
